<div id="kt_demo_panel" class="offcanvas offcanvas-right p-10" ng-class="{'offcanvas-on':demoPanelToggle}">
    <!--begin::Header-->
    <div class="offcanvas-header d-flex align-items-center justify-content-between pb-7">
        <h4 class="font-weight-bold m-0">Select A Demo</h4>
        <a href="javascript:void(0);" ng-click="demoPanelToggle=false" class="btn btn-xs btn-icon btn-light btn-hover-primary" id="kt_demo_panel_close">
            <i class="flaticon2-cross icon-xs text-muted"></i>
        </a>
    </div>
    <!--end::Header-->
    <!--begin::Content-->
    <div class="offcanvas-content">
        <!--begin::Wrapper-->
        <div class="offcanvas-wrapper mb-5 scroll-pull">
            <h5 class="font-weight-bold mb-4 text-center">Demo 1</h5>
            <div class="overlay rounded-lg mb-8 offcanvas-demo">
                <div class="overlay-wrapper rounded-lg">
                    <img src="assets/media/demos/demo1.png" alt="" class="w-100" />
                </div>
                <div class="overlay-layer">
                    <a href="../../demo1/dist" class="btn btn-white btn-text-primary btn-hover-primary font-weight-boldest text-center min-w-75px shadow" target="_blank">Default</a>
                    <a href="https://preview.keenthemes.com/metronic/demo1/rtl/index.html" class="btn btn-white btn-text-primary btn-hover-primary font-weight-boldest text-center min-w-75px shadow" target="_blank">RTL Version</a>
                </div>
            </div>
            <h5 class="font-weight-bold mb-4 text-center">Demo 2</h5>
            <div class="overlay rounded-lg mb-8 offcanvas-demo">
                <div class="overlay-wrapper rounded-lg">
                    <img src="assets/media/demos/demo2.png" alt="" class="w-100" />
                </div>
                <div class="overlay-layer">
                    <a href="../../demo2/dist" class="btn btn-white btn-text-primary btn-hover-primary font-weight-boldest text-center min-w-75px shadow" target="_blank">Default</a>
                    <a href="https://preview.keenthemes.com/metronic/demo2/rtl/index.html" class="btn btn-white btn-text-primary btn-hover-primary font-weight-boldest text-center min-w-75px shadow" target="_blank">RTL Version</a>
                </div>
            </div>
        </div>
        <!--end::Wrapper-->
        <!--begin::Purchase-->
        <div class="offcanvas-footer">
            <a href="https://1.envato.market/EA4JP" target="_blank" class="btn btn-block btn-danger btn-shadow font-weight-bolder text-uppercase">Buy Metronic Now!</a>
        </div>
        <!--end::Purchase-->
    </div>
    <!--end::Content-->
</div>